<!--
*@Author: QWP
*@Description: 公文套红编辑
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <u-collapsed-sider>
        <u-busi-card title="选择套红模板">
          <!-- <u-tree :data="redModule"></u-tree> -->
          <a-list :data-source="redModule">
            <template #renderItem="{item}">
              <a-list-item>
                {{  item  }}
              </a-list-item>
            </template>
          </a-list>
        </u-busi-card>
      </u-collapsed-sider>
      <a-layout-content>
      <a-row :gutter="20" class="f-h-100">
        <a-col :span="16" class="f-h-100">
          <u-wang-editor :value="editValue"></u-wang-editor>
        </a-col>
        <a-col :span="8" class="f-h-100">
          <div v-html="editValue" class="f-h-100 s-bg-white f-padding-20 u-red-doc-view"></div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>

  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { HomeOutlined, FileTextOutlined, UploadOutlined } from '@ant-design/icons-vue';
import SignAudit from './SignAudit.vue'

const route = useRoute()

const editValue = `<h2 style='font-family: Songti SC, Songti SC; font-weight: normal; font-size: 18px; color: #1A1A1A;text-align: center'>挥舞钉钉AI魔法棒，开启新浪微博 AI一体化协作时代</h2>
<p class="u-vice-title" style='font-family: Songti SC, Songti SC;font-weight: normal;font-size: 14px;color: #4A4A4A;text-align: center'>维森股份发〔2024〕4号</p>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">红头文件是指由政府机关或其他正式机构发布的带有红色标题的正式文件。这类文件通常具有权威性和法律效力，在中国尤其常见。红头文件的特点包括：</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">1、红色标题：文件的标题用红色字体打印，通常包括发布机关的名称和文件类型。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">2、文件编号：每个红头文件都有一个唯一的编号，以便于追踪和查找。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">3、发文机关：文件通常会标明发布的政府机关或组织名称。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">4、发布日期：文件上会注明具体的发布日期。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">5、正文内容：包括政策、法规、指示、通知等具体内容。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">6、签发人：有时会有签发人的签名或盖章，以增加文件的正式性和权威性。</div>
<div style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #1A1A1A;">红头文件在政府管理、政策实施、法规发布等方面起着重要作用，常用于发布政策、法规、通知、命令等内容。由于其权威性和正式性，红头文件在执行过程中具有较高的优先级和约束力。</div>
<br>
<br>
<div style="width: 100%;font-family: Songti SC, Songti SC;font-weight: normal;font-size: 16px;color: #1A1A1A;text-align: right">
  <p>维森有限公司</p>
</div>
<div style="width: 100%;font-family: Songti SC, Songti SC;font-weight: normal;font-size: 16px;color: #1A1A1A;text-align: right">
  <p>2024年6月30日</p>
</div>
`

const redModule = [
  "套红模版一",
  "套红模版二",
  "套红模版三",
  "套红模版四",
  "套红模版五",
]


// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
.u-doc-draft-form {
  &>.ant-row {
    $borderColor: #EA0000;
    border-bottom: 1px solid $borderColor ;
    border-right: 1px solid $borderColor ;
    .ant-form-item {
      margin-bottom: 0;
      .ant-form-item-row {
        .ant-col {
          border: 1px solid $borderColor;
          border-bottom: unset;
          border-right: unset;
          border-collapse: collapse;
          background: rgba(234,0,0,0.05);
        }
        .ant-form-item-label {
          label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #EA0000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      .ant-input-suffix {
        color: #AAAAAA
      }
    }
    .u-view-text {
      .ant-form-item-row {
        height: 60px;
        .ant-form-item-label {
          line-height: 60px;
        }
      }
    }
  }
}
.u-red-doc-view {
  widows: 100% !important;
  h2 {
    color: red !important
  }
  div {
    width: 100%;
    line-height: 30px;
  }
  .u-vice-title {
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 2px solid #EA0000 !important;
  }
}
</style>